<template>
  <div>
    <el-dialog
      :title="title"
      v-model="props.showCountry"
      width="600px"
      append-to-body
      @close="handleClose"
    >
      <el-form ref="countryRef" :model="form" :rules="rules">
        <el-form-item label="类型">
          <el-input v-model.trim="props.item.typeName" disabled />
        </el-form-item>
        <el-form-item label="名称" required prop="description">
          <el-input v-model.trim="form.description" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="代码" required prop="isoCode">
          <el-input v-model.trim="form.isoCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="英文名" prop="name" required>
          <el-input v-model.trim="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="旗帜" prop="newImage">
          <image-upload
            @baseUrl="handleBaseUrl"
            v-model="form.newImage"
            :limit="1"
          />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button type="primary" @click="handleSure">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, reactive } from "vue";
const emits = defineEmits(["handleSure", "handleClose"]);
const { proxy } = getCurrentInstance();

const title = ref(""); // 弹出层标题
const realUrl = ref([]);
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
  showCountry: {
    type: Boolean,
    default: false,
  },
  distinction: {
    type: Number,
    default: null, //1是新增0是编辑
  },
});
const rules = {
  name: [
    { required: true, trigger: "blur", message: "请输入" },
    {
      pattern: /^[A-Za-z\s]+$/,
      message: "只能输入英文",
      trigger: "blur",
    },
  ],
  isoCode: [
    { required: true, trigger: "blur", message: "请输入" },
    {
      pattern: /^[A-Za-z]+$/,
      message: "只能输入英文",
      trigger: "blur",
    },
  ],
  description: [{ required: true, trigger: "blur", message: "请输入" }],
};
const form = ref({
  name: null, //英文名
  isoCode: "", //代码
  image: null, //照片
  description: null, //名称
  newImage: "",
});
watch(
  () => props.showCountry,
  () => {
    if (!props.showCountry) return;
    if (props.distinction) {
      title.value = "添加";

      if (props.item.typeName === "洲") {
        form.value = {
          ...form.value,
          continentId: props.item.id, //添加国家时获取洲的id
        };
      } else if (props.item.typeName === "国家") {
        form.value = {
          ...form.value,
          countryId: props.item.id, //添加国家时获取洲的id
        };
      }
    } else {
      title.value = "编辑";
      form.value.description = props.item.description; //名称
      form.value.isoCode = props.item.code;
      form.value.name = props.item.name;
      form.value.newImage = props.item.host;

      if (props.item.typeName === "国家") {
        form.value = {
          ...form.value,
          continentId: props.item.id, //添加国家时获取洲的id
        };
      } else if (props.item.typeName === "地区") {
        form.value = {
          ...form.value,
          countryId: props.item.id, //添加国家时获取洲的id
        };
      }
    }
  }
);
const handleSure = () => {
  proxy.$refs["countryRef"].validate((valid) => {
    if (valid) {
      if (props.distinction) {
        addingCollections(); //添加
        return;
        site.general
          .countryAdd({
            data: form.value,
          })
          .then((res) => {
            if (res.code !== 200) return;
            proxy.$modal.msgSuccess("添加成功");
            proxy.resetForm("countryRef");
            form.value.continentId = null;
            form.value.countryId = null;
            emits("handleSure");
          });
      } else {
        site.general
          .countryUpdate({
            pathParams: {
              id: props.item.id,
            },
            data: form.value,
          })
          .then((res) => {
            if (res.code !== 200) return;
            proxy.$modal.msgSuccess("编辑成功");
            proxy.resetForm("countryRef");
            form.value.continentId = null;
            form.value.countryId = null;
            emits("handleSure");
          });
      }
    }
  });
};
// 添加国家和地区
const addingCollections = () => {
  if (props.item.typeName === "洲") {
    // 如果是洲就是添加国家
    site.general
      .countryAdd({
        data: form.value,
      })
      .then((res) => {
        if (res.code !== 200) return;
        proxy.$modal.msgSuccess("添加成功");
        proxy.resetForm("countryRef");
        form.value = {};
        emits("handleSure");
      });
  } else if (props.item.typeName === "国家") {
    form.value = {
      ...form.value,
      code: form.value.isoCode,
    };
    // 如果是洲就是添加地区
    site.general
      .common_country_zoneAdd({
        data: form.value,
      })
      .then((res) => {
        if (res.code !== 200) return;
        proxy.$modal.msgSuccess("添加成功");
        proxy.resetForm("countryRef");
        form.value = {};

        emits("handleSure");
      });
  }
};

// 编辑国家和地区
const editingCollections=()=>{
  
}
const handleClose = () => {
  form.value = {};
  emits("handleClose");
  proxy.resetForm("countryRef");
};
// 照片的host赋值
const handleBaseUrl = (val) => {
  form.value.image = val.url;
  console.log(val, "[[[[]]]]");
  // newBaseUrl.value = val.url;
};
</script>